{extend name="public/audit" /}
{block name='body'}
<div class="fly-panel" style="padding: 10px;">
    <div class=" layui-form-pane">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-form layui-tab-content" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form">
                        <div class="layui-row layui-col-space15 layui-form-item">
                            <div>
                                <label for="catName" class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="catName" name="Name" required lay-verify="required"
                                           value="{$i.Name}" autocomplete="off" class="layui-input"
                                           style="width: 263px;">
                                </div>
                            </div>

                            <div>
                                <div class="avatar-add">
                                    <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                    <button type="button" class="layui-btn upload-img" id="uploadCatImg">
                                        <i class="layui-icon">&#xe67c;</i>上传新图标
                                    </button>
                                    <img src="__PUBLIC__/{$i.Icon}" id="catImg">
                                    <span class="loading"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">

                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" style="width: 373px;" lay-submit lay-filter="modCat" id="submit">
                                立即修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.config({
        base: "__JS__/"
    }).use(['upload', 'jquery', 'layer', 'form', 'res'], function () {
        let layer = layui.layer, $ = layui.jquery, upload = layui.upload, form = layui.form, response = layui.res;
        let iconSrc = '{$i.Icon}';
        let name = '{$i.Name}';
        let loading;

        form.on('submit(modCat)', function (obj) {
            let data = obj.field;
            name = data.Name;
            $.post("{:url('audit/modifyCatApi')}", {
                guid: '{$i.PK_ResourceCategoryGuid}',
                Name: name,
                Icon: iconSrc
            }, function (res) {
                if (res.errno === 12001) {
                    return layer.alert('该分类名称已存在,请换个名称吧!');
                }
                response.modify(res);
            });
        });


        upload.render({
            elem: '#uploadCatImg',
            url: "{:url('base/upload')}",
            choose: function (obj) {

            },
            before:function (obj) {
                obj.preview(function () {
                    console.log(arguments);
                    $('#catImg').attr('src', arguments[2]);
                });
                loading = layer.load();
            }
            , done: function (res, index, upload) {
                iconSrc = res.data;
                name = $('#catName').val();
                layer.close(loading);
                layer.alert('图标上传成功');

            }
            , error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        })

    });
</script>
{/block}